<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { createUnrealPlayer } from '@/api/game';

  const props = defineProps<{
    gameId: string;
  }>();

  const emit = defineEmits(['close']);

  const data = ref<{
    count: number;
  }>({
    count: 100,
  });
  const saving = ref(false);
  const handleSubmit = async () => {
    if (data.value.count <= 0) {
      Message.warning('虚拟球员个数要大于0');
      return;
    }

    try {
      saving.value = true;
      await createUnrealPlayer(props.gameId, data.value.count);
      Message.success('创建成功');
      emit('close', true);
    } finally {
      saving.value = false;
    }
  };
</script>

<template>
  <a-modal
    title="创建虚拟球员"
    :width="400"
    visible
    :ok-loading="saving"
    @cancel="emit('close', false)"
    @before-ok="handleSubmit"
  >
    <a-form :model="data" layout="vertical">
      <a-form-item label="虚拟球员数量" field="count">
        <a-input-number
          v-model="data.count"
          :precision="0"
          :min="1"
          :step="1"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
